<template>
  <div class="habitableRoomManagement">
    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;">
        <div class="border"></div>
        <h3>{{habitableRoomManagement.title}}</h3>
      </el-col>
    </el-row>
    <el-row style="display:flex">
      <el-col>
        <div style="display:flex;align-items: center;margin-left:20px">
          <el-button
            class="addBtn boxShadowButton"
            icon="el-icon-circle-plus"
            style="margin-right:40px"
            @click="addList"
          >{{habitableRoomManagement.add}}</el-button>
          <p style="width:40px">{{habitableRoomManagement.search}}</p>
          <el-input
            style="width:260px;margin-right:10px"
            :placeholder="habitableRoomManagement.searchNo"
            v-model.trim="searchNo"
            @keyup.enter.native.prevent="search"
          ></el-input>
          <el-button
            class="searchBtn boxShadowButton"
            @click="search"
          >{{habitableRoomManagement.check}}</el-button>
        </div>
      </el-col>
      <el-col align="right">
        <el-button
          class="prevPage boxShadowButton"
          :disabled="pageNum==firstPage"
          @click="prevePage"
        >{{habitableRoomManagement.prevePage}}</el-button>
        <el-button
          class="nextPage boxShadowButton"
          :disabled="pageNum==lastPage"
          @click="nextPage"
        >{{habitableRoomManagement.nextPage}}</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%;margin-top:10px;margin-left:20px"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column
        type="index"
        :label="habitableRoomManagement.sort"
        min-width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="roomNo"
        :label="habitableRoomManagement.roomNo"
        min-width="120"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="floorNo"
        :label="habitableRoomManagement.manNumber"
        min-width="120"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="buildingName"
        :label="habitableRoomManagement.manNumber"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="checkInStatus"
        :label="habitableRoomManagement.status"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column :label="habitableRoomManagement.dosth" min-width="220" align="center">
        <template slot-scope="scope">
          <el-button
            class="detailBtn boxShadowButton"
            @click="detailClick(scope.row)"
            :size="size"
          >{{habitableRoomManagement.detail}}</el-button>
          <el-button
            class="deleteBtn boxShadowButton"
            :size="size"
            @click="delet(scope.row)"
          >{{habitableRoomManagement.delet}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 删除 -->
    <el-dialog
      :title="habitableRoomManagement.delete"
      :visible.sync="deletDialogVisible"
      width="30%"
      :center="true"
    >
      <h3 style="text-align: center">{{habitableRoomManagement.isDelet}}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="deleteBtn boxShadowButton"
          @click="checkDelet"
          :size="size"
        >{{habitableRoomManagement.yes}}</el-button>
        <el-button
          class="jiebangBtn boxShadowButton"
          :size="size"
          @click="deletDialogVisible = false"
        >{{habitableRoomManagement.no}}</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      style="margin-top:20px"
      align="center"
      :current-page="currentPage"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
export default {
  name: "HabitableRoomManagement",
  data() {
    return {
      habitableRoomManagement: this.$t("m.habitableRoomManagement"), //引入 lang 里面的字符串资源,
      size: "mini",
      tableData: [],
      deletDialogVisible: false,
      rowList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      searchNo: "",
      firstPage: "", //第一页
      lastPage: "", //最后一页
      acceptLanguage: "ja_JP" //数据请求传参需要传的语言  ja_JP----日文
    };
  },
  methods: {
    //跳转详情
    detailClick(row) {
      sessionStorage.setItem("HabitableType", "fix");
      bus.$emit("homePage", {
        type: "jump",
        path: "/habitableroomDetail",
        title: this.habitableRoomManagement.fix
      });
      sessionStorage.setItem("roomId", row.id);
    },

    //跳转添加页面
    addList() {
      sessionStorage.setItem("HabitableType", "add");
      bus.$emit("homePage", {
        type: "jump",
        path: "/habitableroomDetail",
        title: this.habitableRoomManagement.add
      });
    },

    //上一页
    prevePage() {
      this.pageNum =
        this.pageNum > this.firstPage ? this.pageNum - 1 : this.firstPage;
      this.getList();
    },

    //下一页
    nextPage() {
      this.pageNum =
        this.pageNum < this.lastPage ? this.pageNum + 1 : this.lastPage;
      this.getList();
    },

    //删除
    delet(row) {
      this.deletDialogVisible = true;
      this.rowList = row;
    },

    //确认删除
    checkDelet() {
      this.$deleteList(
        "omc/Room/lifeRoom/" + this.rowList.id,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.deletDialogVisible = false;
          this.getList();
          this.$message({ message: res.message, type: "success" });
        }
      });
    },

    //获取房间数据
    getList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        roomNo: this.searchNo
      };
      this.$get("omc/Room/listLifeRooms", param, this.acceptLanguage).then(
        res => {
          res.list.forEach(item => {
            if (item.checkInStatus == 1) {
              item.checkInStatus = this.habitableRoomManagement.checkIn;
            } else {
              item.checkInStatus = this.habitableRoomManagement.nocheck;
            }
          });
          this.tableData = res.list;
          this.total = Number(res.total);
          this.currentPage = res.pageNum;
          this.firstPage = res.firstPage; //第一页
          this.lastPage = res.lastPage; //最后一页
        }
      );
      // let param ={
      //   pageNum:this.pageNum,
      //   pageSize:this.pageSize,
      // }
      // if(this.searchNo != ''){
      //   param.name = this.searchNo;
      // }
      // this.$get('omc/Room/listLifeRooms',param,this.acceptLanguage).then(res =>{
      //     res.list.forEach(item => {
      //       if (item.checkInStatus == 1) {
      //         item.checkInStatus = this.habitableRoomManagement.checkIn;
      //       } else {
      //         item.checkInStatus = this.habitableRoomManagement.nocheck;
      //       }
      //     });
      //     this.tableData = res.list;
      //     this.total = Number(res.total);
      //     this.currentPage = res.pageNum;
      //     this.firstPage = res.firstPage; //第一页
      //     this.lastPage = res.lastPage; //最后一页
      //   }
      // );
    },

    //翻页
    changePage(val) {
      this.pageNum = val;
      this.currentPage = val;
      this.getList();
    },

    //搜索
    search() {
      this.pageNum = 1;
      this.getList();
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    }
  },
  created() {},
  mounted() {
    this.getList();
    this.$bus.$on("changeHabitableroom", () => {
      this.getList();
    });
  }
};
</script>
<style lang="scss" scoped>
.habitableRoomManagement {
  .border {
    width: 10px;
    height: 30px;
    background: black;
    margin-right: 10px;
  }
  .prevPage {
    background: #409efe;
    color: #ffffff;
  }
  .nextPage {
    background: #ffffff;
  }
  .addBtn {
    color: #7e7e7e;
  }
  .searchBtn {
    background: #409eff;
    color: #ffffff;
  }
  .detailBtn {
    background: #409eff;
    color: #ffffff;
    border-radius: 5px;
  }
  .deleteBtn {
    background: #dddddd;
    color: #010101;
    border-radius: 5px;
  }
}
</style>